import ReactEcharts from 'echarts-for-react'
import * as echarts from 'echarts'
import merge from 'lodash.merge'
import clonedeep from 'lodash.clonedeep'

import '../tooltip.less'
import {useRef} from 'react'

const Pie: React.FC = (props: any) => {
    const defaultSeries: any = {
        // 普通线条
        normal: {
            name: '',
            type: 'pie',
            radius: ['70%', '84%'],
            center: ['24%', '50%'],
            // hoverAnimation: false,
            itemStyle: {
                label: {
                    show: false,
                },
            },
        },
    }
    const defaultOption: any = {
        normal: {
            color: ['#1CC1FF', '#1A7AFF', '#29FFC9', '#fff', '#1A2EFF', '#1A5EFF'],
            legend: {
                orient: 'vertical',
                top: 'middle',
                left: '50%',
            },
            graphic: {
                elements: [
                    {
                        type: 'image',
                        z: 3,
                        style: {
                            // image: CirclePng,
                            width: 78,
                            height: 78,
                            borderRadius: '50%',
                        },
                        left: 'center',
                        top: 'center',
                    },
                ],
            },
            tooltip: {
                show: true,
            },
            toolbox: {
                show: false,
            },
        },
    }
    const seriesData = useRef<any>([])
    const timer = useRef<any>(null)

    const emphasis = (chart: any) => {
        if (props.animate == false) {
            return
        }
        const mychart = chart
        const number = props.serieslength
        let index = 0

        if (number > 0) {
            const start = () => {
                timer.current = setInterval(function () {
                    mychart.dispatchAction({
                        type: 'hideTip',
                        seriesIndex: 0,
                        dataIndex: index,
                    })
                    // 显示提示框
                    mychart.dispatchAction({
                        type: 'showTip',
                        seriesIndex: 0,
                        dataIndex: index,
                    })
                    // 取消高亮指定的数据图形
                    mychart.dispatchAction({
                        type: 'downplay',
                        seriesIndex: 0,
                        dataIndex: index === 0 ? number - 1 : index - 1,
                    })
                    mychart.dispatchAction({
                        type: 'highlight',
                        seriesIndex: 0,
                        dataIndex: index,
                    })
                    index++
                    if (index >= number) {
                        index = 0
                    }
                }, 2000)
            }

            start()
            mychart.on('mouseover', () => {
                clearInterval(timer.current)
                timer.current = null
                mychart.dispatchAction({
                    type: 'hideTip',
                    seriesIndex: 0,
                    dataIndex: index,
                })
                mychart.dispatchAction({
                    type: 'downplay',
                    seriesIndex: 0,
                    dataIndex: index === 0 ? number - 1 : index - 1,
                })
                index = -1
            })

            mychart.on('mouseout', () => {
                start()
            })
        }
    }
    const mergeOption = (option: any = {}) => {
        const newOption = merge(
            {},
            defaultOption[option.styleType || 'normal'],
            option,
        )
        return newOption
    }

    const mergeSerie = (serie: any = {}) => {
        const newSerie = merge(
            {},
            defaultSeries[serie.styleType || 'normal'],
            serie,
        )
        return newSerie
    }

    const chartOptionMerge = () => {
        const propsOption = props.option || {}
        if (propsOption.series && propsOption.series.length) {
            propsOption.series = propsOption.series.map((item: any) => {
                item = mergeSerie(item)
                return item
            })
        }
        if (propsOption.series && propsOption.series.length) {
            seriesData.current = propsOption.series[0].data || []
        } else {
            seriesData.current = []
        }
        const option = mergeOption(propsOption)
        return option
    }
    return (
        <ReactEcharts
            echarts={echarts}
            onChartReady={(chart) => emphasis(chart)}
            {...props}
            option={clonedeep(chartOptionMerge())}
        />
    )
}

export default Pie
